<template>
	<view class="content">
		<view class="title">
			<text>火 锅 游 戏</text>
		</view>
		<view class="team">
			<view class=""></view>
			<view class="team-name">
				<text>{{teamName}}</text>
			</view>
		</view>
		<view class="body">
			<image class="bg" src="../../static/game/gameBg.jpg"></image>
			<view class="area">
				<view class="balls" v-for="(item,index) in ballPosition" :key="index">
					<image class="balls-img" src="../../static/game/octopusBall.png"
						:style="{left:item.left + '%',top:item.top + '%'}"></image>
				</view>
			</view>
		</view>
		<view class="spoon" id="spoon">
			<image class="spoon-img" src="../../static/game/spoon.png"></image>
		</view>
		<view class="tools">
			<view class="left">
				<!-- <view class="spoon" id="spoon">
					<image class="spoon-img" src="../../static/game/spoon.png"></image>
				</view> -->
				<view class="tip">
					请移动漏勺,捞取丸子。<br />选好请单击鼠标。
				</view>
			</view>
			<!-- <view class="right">
				<view class="line">
					<text></text>
					<text class="btn" @click="spoonMove(38)">上</text>
					<text></text>
				</view>
				<view class="line">
					<text class="btn" @click="spoonMove(37)">左</text>
					<text class="btn" @click="spoonMove(40)">下</text>
					<text class="btn" @click="spoonMove(39)">右</text>
				</view>
				<view class="line">
					<text></text>
					<text class="btn" style="width: 60px;" @click="spoonMove(13)">确定</text>
					<text></text>
				</view>
			</view> -->
		</view>
		<view class="back" @click.prevent="toIndex">
			<text>返回</text>
		</view>

		<!-- 成功组件 -->
		<Successform :visible="visible" @reStart="reStart" @closeForm="closeForm"></Successform>
	</view>
</template>

<script>
	import Successform from './form.vue'
	import Config from '../../config/config.js'

	export default {
		components: {
			Successform
		},
		data() {
			return {
				teamName: Config.teamName,
				ballPosition: [],
				gameWidth: 0,
				gameHeight: 0,
				visible: false // 成功弹窗
			}
		},
		created() {
			this.replayPosition()
		},
		mounted() {
			let that = this
			// 移动漏勺
			var spoon = document.getElementById("spoon");
			spoon.left = 0;
			spoon.top = 0;
			document.onkeydown = function(e) {
				//	左-37 上-38 右-39 下-40
				let keyCode = event.keyCode;
				if (keyCode == 37) {
					spoon.left -= 10;
				}
				if (keyCode == 38) {
					spoon.top -= 10;
				}
				if (keyCode == 39) {
					spoon.left += 10;
				}
				if (keyCode == 40) {
					spoon.top += 10;
				}
				if (keyCode == 13) {
					that.confirm()
				}
				spoon.style.left = spoon.left + 'px', spoon.style.top = spoon.top + 'px';
			};
			document.onmousemove = function(e) {
				// console.log('e', e.clientX, e.clientY, e.pageX, e.pageY);
				e = e || window.event;
				if (event.clientY > 90 && event.clientY < 690) {
					spoon.style.display = 'block'
					spoon.style.left = (e.clientX - 25) + "px";
					spoon.style.top = (e.clientY - 25) + "px";
					spoon.style.cursor = 'none';
					document.onmousedown = function(e) {
						if (event.clientY > 90 && event.clientY < 690) {
							that.confirm()
						}
					}
				} else {
					spoon.style.display = 'none'
				}
			}
		},
		methods: {
			replayPosition() {
				const that = this
				uni.getSystemInfo({
					success: function(res) {
						// console.log('屏幕宽度', res.windowWidth);
						this.gameWidth = res.windowWidth
						// console.log('屏幕高度', res.windowHeight);
						this.gameHeight = res.windowHeight
						for (let i = 0; i < 10; i++) {
							let left = 0
							let top = 0
							left = Math.floor(Math.random() * this.gameWidth)
							top = Math.floor(Math.random() * this.gameHeight)
							that.ballPosition[i] = {
								id: i,
								left: left / this.gameWidth * 100,
								top: top / this.gameHeight * 100
							}
						}
						// console.log('that.ballPosition', that.ballPosition);
					}
				});
			},
			toIndex() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			// 移动汤勺
			spoonMove(keyCode) {
				if (keyCode == 37) {
					spoon.left -= 10;
				}
				if (keyCode == 38) {
					spoon.top -= 10;
				}
				if (keyCode == 39) {
					spoon.left += 10;
				}
				if (keyCode == 40) {
					spoon.top += 10;
				}
				if (keyCode == 13) {
					this.confirm()
				}
				spoon.style.left = spoon.left + 'px', spoon.style.top = spoon.top + 'px';
			},
			confirm() {
				// ==>获取勺子位置
				var spoonPos = spoon.getBoundingClientRect();
				// console.log('spoonPos', spoonPos);
				// x:7.06cm 2.75cm 0.39
				// y:7.06cm 5.33cm 0.75
				const spoonX = spoonPos.x + 27.5
				const spoonY = spoonPos.y + 48
				// console.log('spoonX', spoonX, 'spoonY', spoonY);
				// ==>获取丸子位置
				var hotPotBalls = document.getElementsByClassName("balls-img");
				var ballsArr = []
				for (let i = 0; i < 10; i++) {
					let ballPos = hotPotBalls[i].getBoundingClientRect();
					ballsArr[i] = {
						ballX: ballPos.x + 25,
						ballY: ballPos.y + 25
					}
				}
				// console.log('ballsArr', ballsArr);
				// ==>判断是否在某个丸子上
				const ifSuccess = ballsArr.some((item, index) => {
					if (Math.abs(item.ballX - spoonX) < 15 && Math.abs(item.ballY - spoonY) < 15) {
						return true
					}
				})
				// console.log('ifSuccess', ifSuccess);
				if (ifSuccess) {
					this.visible = true
				} else {
					uni.showToast({
						title: '抱歉,未选中!',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 再玩一次
			reStart() {
				this.visible = false
				this.replayPosition()
			},
			closeForm() {
				this.visible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
	}

	// 标题
	.title {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 16px;
		font-weight: 700;
	}

	// 团队名称
	.team {
		display: flex;
		justify-content: space-around;

		.team-name {
			margin-right: 50px;
		}
	}

	// 游戏区域
	.body {
		width: 100%;
		height: 600px;
		margin-top: 20px;
		// background: url(../../static/game/gameBg.jpg) -60px;
		// background-size: cover;
		position: relative;

		.bg {
			width: 600px;
			height: 600px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -300px 0 0 -300px;
		}

		// 丸子出现区域
		.area {
			margin: 0 auto;
			width: 400px;
			height: 400px;
			border-radius: 50%;
			overflow: hidden;
			position: relative;
			top: 16%;
			// background: #000;	// 区域显示
		}
	}

	// 随机出现的丸子
	.balls {
		width: 30px;
		height: 30px;

		.balls-img {
			position: absolute;
			width: 30px;
			height: 30px;
		}
	}

	// 功能区
	.tools {
		display: flex;
		position: relative;

		.left {
			flex: 2;
			position: relative;
		}

		.right {
			flex: 1;
			margin-top: 20px;

			.line {
				display: flex;
				justify-content: space-between;
			}

			.btn {
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 6px;
				background: #FF7970;
				color: #FFFFFF;
				margin-right: 10px;
				margin-bottom: 10px;
				text-align: center;
			}
		}
	}

	// 勺子
	.spoon {
		width: 50px;
		height: 50px;
		margin: 0 auto;
		position: absolute;
		z-index: 999;
		display: none;

		.spoon-img {
			width: 50px;
			height: 50px;
		}
	}

	// 说明
	.tip {
		margin: 20px 0;
		text-align: center;
	}

	// 返回
	.back {
		width: 120px;
		margin: 0 auto;
		text-align: center;
		background: #FF7970;
		color: #FFFFFF;
		border-radius: 20px;
		padding: 6px 2px;
	}
</style>
